
<template>
  <div class="tracking-container">
    <div class="page-header">
      <div class="header-title">
        <h2>实时跟踪</h2>
        <span class="subtitle">实时监控车辆位置和运输状态</span>
      </div>
      <div class="header-actions">
        <el-button-group>
          <el-button type="primary" @click="refreshTracking">
            <el-icon><Refresh /></el-icon>刷新
          </el-button>
          <el-button @click="toggleAutoRefresh">
            <el-icon><Timer /></el-icon>
            {{ isAutoRefresh ? '关闭自动刷新' : '开启自动刷新' }}
          </el-button>
        </el-button-group>
      </div>
    </div>

    <el-row :gutter="20" class="tracking-content">
      <!-- 左侧：车辆列表 -->
      <el-col :span="6">
        <el-card class="vehicle-list-card">
          <template #header>
            <div class="card-header">
              <span>运输车辆 ({{ vehicles.length }})</span>
              <el-input
                v-model="searchKeyword"
                placeholder="搜索车牌号/司机"
                clearable
                prefix-icon="Search"
              ></el-input>
            </div>
          </template>

          <el-tabs v-model="activeVehicleTab">
            <el-tab-pane label="在途" name="onroad">
              <el-scrollbar height="calc(100vh - 280px)">
                <div 
                  v-for="vehicle in filteredVehicles" 
                  :key="vehicle.id"
                  class="vehicle-item"
                  :class="{ active: selectedVehicle?.id === vehicle.id }"
                  @click="selectVehicle(vehicle)"
                >
                  <div class="vehicle-info">
                    <div class="vehicle-primary">
                      <span class="plate-number">{{ vehicle.plateNumber }}</span>
                      <el-tag 
                        :type="getStatusType(vehicle.status)"
                        size="small"
                      >
                        {{ getStatusText(vehicle.status) }}
                      </el-tag>
                    </div>
                    <div class="vehicle-secondary">
                      <span>{{ vehicle.driver }}</span>
                      <span>{{ vehicle.phone }}</span>
                    </div>
                    <div class="vehicle-route">
                      <el-tooltip 
                        :content="vehicle.currentLocation"
                        placement="top"
                      >
                        <span class="location">
                          <el-icon><Location /></el-icon>
                          {{ vehicle.currentLocation }}
                        </span>
                      </el-tooltip>
                    </div>
                  </div>
                </div>
              </el-scrollbar>
            </el-tab-pane>
            
            <el-tab-pane label="已完成" name="completed">
              <!-- 已完成的车辆列表，结构类似 -->
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>

      <!-- 右侧：地图和详情 -->
      <el-col :span="18">
        <el-card class="map-card">
          <template #header>
            <div class="card-header">
              <span>实时位置</span>
              <div class="map-controls">
                <el-radio-group v-model="mapView" size="small">
                  <el-radio-button label="all">全部车辆</el-radio-button>
                  <el-radio-button label="selected">选中车辆</el-radio-button>
                </el-radio-group>
                <el-button-group>
                  <el-button size="small" @click="zoomIn">
                    <el-icon><ZoomIn /></el-icon>
                  </el-button>
                  <el-button size="small" @click="zoomOut">
                    <el-icon><ZoomOut /></el-icon>
                  </el-button>
                  <el-button size="small" @click="resetMap">
                    <el-icon><RefreshRight /></el-icon>
                  </el-button>
                </el-button-group>
              </div>
            </div>
          </template>

          <div class="map-container">
            <!-- 实际地图组件 -->
            <div id="tracking-map" ref="mapContainer" class="map-instance"></div>
            <!-- 加载中提示 -->
            <div v-if="!mapLoaded" class="map-loading">
              <el-empty description="地图加载中...">
                <template #image>
                  <el-icon style="font-size: 60px"><Loading /></el-icon>
                </template>
              </el-empty>
            </div>
          </div>
        </el-card>

        <!-- 运输详情 -->
        <el-card v-if="selectedVehicle" class="detail-card">
          <template #header>
            <div class="card-header">
              <span>运输详情</span>
              <el-button-group>
                <el-button 
                  type="primary" 
                  size="small"
                  @click="showTrackHistory"
                >
                  轨迹回放
                </el-button>
                <el-button 
                  type="success" 
                  size="small"
                  @click="contactDriver"
                >
                  联系司机
                </el-button>
              </el-button-group>
            </div>
          </template>

          <el-descriptions :column="3" border>
            <el-descriptions-item label="车牌号">{{ selectedVehicle.plateNumber }}</el-descriptions-item>
            <el-descriptions-item label="司机">{{ selectedVehicle.driver }}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{ selectedVehicle.phone }}</el-descriptions-item>
            <el-descriptions-item label="当前位置">{{ selectedVehicle.currentLocation }}</el-descriptions-item>
            <el-descriptions-item label="行驶速度">{{ selectedVehicle.speed }} km/h</el-descriptions-item>
            <el-descriptions-item label="剩余里程">{{ selectedVehicle.remainingDistance }} km</el-descriptions-item>
          </el-descriptions>

          <div class="transport-info">
            <h4>运输信息</h4>
            <el-steps :active="selectedVehicle.transportProgress" finish-status="success">
              <el-step title="已发车" :description="selectedVehicle.departureTime"></el-step>
              <el-step title="运输中" :description="selectedVehicle.estimatedArrivalTime"></el-step>
              <el-step title="已送达"></el-step>
            </el-steps>

            <div class="route-info">
              <div class="route-point">
                <span class="point-label">起点：</span>
                <span class="point-value">{{ selectedVehicle.startLocation }}</span>
              </div>
              <div class="route-point">
                <span class="point-label">终点：</span>
                <span class="point-value">{{ selectedVehicle.endLocation }}</span>
              </div>
            </div>
          </div>

          <!-- 最近动态 -->
          <div class="recent-activities">
            <h4>最近动态</h4>
            <el-timeline>
              <el-timeline-item
                v-for="activity in selectedVehicle.activities"
                :key="activity.time"
                :timestamp="activity.time"
                :type="activity.type"
              >
                {{ activity.content }}
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 轨迹回放对话框 -->
    <el-dialog
      v-model="trackHistoryVisible"
      title="轨迹回放"
      width="80%"
    >
      <div class="track-history">
        <!-- 实际应用中这里会显示轨迹回放的地图和控制器 -->
        <p>轨迹回放功能开发中...</p>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Refresh,
  Timer,
  Location,
  Search,
  ZoomIn,
  ZoomOut,
  RefreshRight,
  Loading
} from '@element-plus/icons-vue'

// 高德地图API密钥 - 使用新的AMAP_JS_KEY
const amapKey = import.meta.env.AMAP_JS_KEY || import.meta.env.VITE_AMAP_KEY || ''

// 地图相关变量
const mapContainer = ref(null)
const map = ref(null)
const mapLoaded = ref(false)
const markers = ref([])
const polylines = ref([])
const infoWindows = ref([])

// 车辆列表
const vehicles = ref([
  {
    id: 1,
    plateNumber: '沪A12345',
    driver: '张三',
    phone: '13800138000',
    status: 'running',
    currentLocation: '上海市浦东新区张江高科技园区',
    speed: 65,
    remainingDistance: 120,
    startLocation: '上海市嘉定区安亭汽车城',
    endLocation: '南京市江宁区南京南站物流园',
    departureTime: '2025-03-14 10:00:00',
    estimatedArrivalTime: '2025-03-19 18:00:00',
    transportProgress: 1,
    position: [121.473701, 31.230416], // 当前位置坐标 [经度, 纬度]
    startPosition: [121.2, 31.3], // 起点坐标
    endPosition: [118.8, 32.1], // 终点坐标
    path: [ // 路径坐标点
      [121.2, 31.3],
      [121.3, 31.25],
      [121.473701, 31.230416],
      [120.5, 31.8],
      [119.5, 32.0],
      [118.8, 32.1]
    ],
    activities: [
      {
        time: '2025-03-14 14:30:00',
        type: 'primary',
        content: '已通过G2京沪高速常州服务区'
      },
      {
        time: '2025-03-14 12:00:00',
        type: 'success',
        content: '装货完成，开始运输'
      },
      {
        time: '2025-03-14 10:00:00',
        type: 'info',
        content: '车辆到达装货点'
      }
    ]
  },
  {
    id: 2,
    plateNumber: '沪B67890',
    driver: '李四',
    phone: '13900139000',
    status: 'resting',
    currentLocation: '江苏省无锡市锡山区',
    speed: 0,
    remainingDistance: 180,
    startLocation: '上海市宝山区上海北站物流中心',
    endLocation: '杭州市萧山区杭州东站物流园',
    departureTime: '2025-03-14 09:00:00',
    estimatedArrivalTime: '2025-03-19 19:00:00',
    transportProgress: 1,
    position: [120.5, 31.8], // 当前位置坐标 [经度, 纬度]
    startPosition: [121.5, 31.2], // 起点坐标
    endPosition: [120.2, 30.3], // 终点坐标
    path: [ // 路径坐标点
      [121.5, 31.2],
      [121.3, 31.25],
      [120.5, 31.8],
      [119.5, 32.0],
      [118.8, 32.1],
      [120.2, 30.3]
    ],
    activities: [
      {
        time: '2025-03-14 14:00:00',
        type: 'warning',
        content: '司机休息中'
      },
      {
        time: '2025-03-14 11:30:00',
        type: 'primary',
        content: '已通过G60沪昆高速嘉兴服务区'
      },
      {
        time: '2025-03-14 09:00:00',
        type: 'success',
        content: '装货完成，开始运输'
      }
    ]
  }
])

// 搜索关键词
const searchKeyword = ref('')

// 筛选后的车辆列表
const filteredVehicles = computed(() => {
  if (!searchKeyword.value) return vehicles.value
  
  const keyword = searchKeyword.value.toLowerCase()
  return vehicles.value.filter(vehicle => 
    vehicle.plateNumber.toLowerCase().includes(keyword) ||
    vehicle.driver.toLowerCase().includes(keyword)
  )
})

// 选中的车辆
const selectedVehicle = ref(null)

// 地图视图模式
const mapView = ref('all')

// 车辆标签页
const activeVehicleTab = ref('onroad')

// 自动刷新
const isAutoRefresh = ref(true)
let refreshTimer = null

// 轨迹回放对话框
const trackHistoryVisible = ref(false)

// 获取状态类型
const getStatusType = (status) => {
  const typeMap = {
    'running': 'success',
    'resting': 'warning',
    'loading': 'primary',
    'unloading': 'primary',
    'completed': 'info',
    'exception': 'danger'
  }
  return typeMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const textMap = {
    'running': '行驶中',
    'resting': '休息中',
    'loading': '装货中',
    'unloading': '卸货中',
    'completed': '已完成',
    'exception': '异常'
  }
  return textMap[status] || '未知'
}

// 加载高德地图脚本
const loadAMapScript = () => {
  return new Promise((resolve, reject) => {
    // 如果已经加载过，直接返回
    if (window.AMap) {
      resolve(window.AMap)
      return
    }
    
    // 设置安全配置
    window._AMapSecurityConfig = {
      serviceHost: 'https://webapi.amap.com'
    }
    
    // 创建script标签
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.async = true
    script.src = `https://webapi.amap.com/maps?v=2.0&key=${amapKey}&plugin=AMap.Scale,AMap.ToolBar,AMap.MapType,AMap.Driving`
    
    script.onerror = reject
    script.onload = () => {
      if (window.AMap) {
        resolve(window.AMap)
      } else {
        reject(new Error('高德地图脚本加载失败'))
      }
    }
    
    document.head.appendChild(script)
  })
}

// 地图初始化
const initMap = async () => {
  if (!mapContainer.value) return
  
  try {
    console.log('使用的高德地图API密钥:', amapKey)
    
    // 加载高德地图API
    const AMap = await loadAMapScript()
    
    // 创建地图实例
    map.value = new AMap.Map(mapContainer.value, {
      zoom: 10,
      center: [121.473701, 31.230416], // 默认中心点（上海）
      viewMode: '2D'
    })
    
    // 添加地图控件
    map.value.addControl(new AMap.Scale())
    map.value.addControl(new AMap.ToolBar())
    map.value.addControl(new AMap.MapType({
      defaultType: 0
    }))
    
    mapLoaded.value = true
    
    // 显示所有车辆
    await nextTick()
    showAllVehicles()
    
    // 如果有选中的车辆，显示其详情
    if (selectedVehicle.value) {
      highlightVehicle(selectedVehicle.value)
    }
  } catch (error) {
    console.error('地图加载失败:', error)
    ElMessage.error('地图加载失败，请刷新页面重试')
  }
}

// 清除地图上的所有覆盖物
const clearMapOverlays = () => {
  if (!map.value) return
  
  // 清除标记点
  if (markers.value.length) {
    markers.value.forEach(marker => marker.setMap(null))
    markers.value = []
  }
  
  // 清除路线
  if (polylines.value.length) {
    polylines.value.forEach(polyline => polyline.setMap(null))
    polylines.value = []
  }
  
  // 清除信息窗口
  if (infoWindows.value.length) {
    infoWindows.value.forEach(infoWindow => infoWindow.close())
    infoWindows.value = []
  }
}

// 显示所有车辆
const showAllVehicles = () => {
  if (!map.value || !mapLoaded.value || !window.AMap) return
  
  clearMapOverlays()
  
  // 所有车辆的位置点集合，用于调整地图视野
  const allPositions = []
  
  vehicles.value.forEach(vehicle => {
    // 添加车辆当前位置标记
    const AMap = window.AMap
    
    // 创建车辆标记
    const marker = new AMap.Marker({
      position: vehicle.position,
      icon: new AMap.Icon({
        size: new AMap.Size(40, 40),
        image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
        imageSize: new AMap.Size(40, 40)
      }),
      offset: new AMap.Pixel(-20, -40),
      title: vehicle.plateNumber,
      extData: { vehicleId: vehicle.id }
    })
    
    // 创建信息窗口
    const infoWindow = new AMap.InfoWindow({
      content: `
        <div class="info-window">
          <div class="info-title">
            <span class="plate-number">${vehicle.plateNumber}</span>
            <span class="status ${vehicle.status}">${getStatusText(vehicle.status)}</span>
          </div>
          <div class="info-content">
            <p><i class="el-icon-user"></i> 司机: ${vehicle.driver}</p>
            <p><i class="el-icon-location"></i> 当前位置: ${vehicle.currentLocation}</p>
            <p><i class="el-icon-time"></i> 预计送达: ${vehicle.estimatedArrivalTime}</p>
          </div>
        </div>
      `,
      offset: new AMap.Pixel(0, -40),
      closeWhenClickMap: true
    })
    
    // 点击标记时显示信息窗口
    marker.on('click', () => {
      infoWindow.open(map.value, vehicle.position)
      selectVehicle(vehicle)
    })
    
    // 添加到地图
    marker.setMap(map.value)
    markers.value.push(marker)
    infoWindows.value.push(infoWindow)
    
    // 如果有路径信息，绘制路线
    if (vehicle.path && vehicle.path.length > 1) {
      // 创建路线
      const polyline = new AMap.Polyline({
        path: vehicle.path,
        strokeColor: '#3366FF',  // 线颜色
        strokeOpacity: 0.7,      // 线透明度
        strokeWeight: 6,         // 线宽
        strokeStyle: 'solid',    // 线样式
        strokeDasharray: [10, 5], // 虚线样式
        lineJoin: 'round',       // 折线拐点连接处样式
        lineCap: 'round',        // 折线两端线帽样式
        zIndex: 50,              // 层级
        showDir: true            // 显示方向
      })
      
      polyline.setMap(map.value)
      polylines.value.push(polyline)
      
      // 添加起点标记
      const startMarker = new AMap.Marker({
        position: vehicle.path[0],
        icon: new AMap.Icon({
          size: new AMap.Size(25, 34),
          image: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
          imageSize: new AMap.Size(25, 34)
        }),
        offset: new AMap.Pixel(-12, -34),
        title: '起点: ' + vehicle.startLocation
      })
      
      startMarker.setMap(map.value)
      markers.value.push(startMarker)
      
      // 添加终点标记
      const endMarker = new AMap.Marker({
        position: vehicle.path[vehicle.path.length - 1],
        icon: new AMap.Icon({
          size: new AMap.Size(25, 34),
          image: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
          imageSize: new AMap.Size(25, 34)
        }),
        offset: new AMap.Pixel(-12, -34),
        title: '终点: ' + vehicle.endLocation
      })
      
      endMarker.setMap(map.value)
      markers.value.push(endMarker)
      
      // 收集所有位置点用于调整视野
      vehicle.path.forEach(position => {
        allPositions.push(position)
      })
    } else {
      // 如果没有路径，至少添加当前位置到位置集合
      allPositions.push(vehicle.position)
    }
  })
  
  // 调整地图视野以包含所有点
  if (allPositions.length > 0) {
    map.value.setFitView(null, false, [50, 50, 50, 50])
  }
}

// 高亮显示选中的车辆
const highlightVehicle = (vehicle) => {
  if (!map.value || !mapLoaded.value || !window.AMap) return
  
  // 先清除之前的高亮
  clearMapOverlays()
  
  // 重新显示所有车辆，但样式不同
  vehicles.value.forEach(v => {
    const AMap = window.AMap
    const isSelected = v.id === vehicle.id
    
    // 创建车辆标记
    const marker = new AMap.Marker({
      position: v.position,
      icon: new AMap.Icon({
        size: new AMap.Size(40, 40),
        image: isSelected 
          ? 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png'  // 选中的用红色标记
          : 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 未选中的用蓝色标记
        imageSize: new AMap.Size(40, 40)
      }),
      offset: new AMap.Pixel(-20, -40),
      title: v.plateNumber,
      zIndex: isSelected ? 110 : 100,
      extData: { vehicleId: v.id }
    })
    
    marker.setMap(map.value)
    markers.value.push(marker)
    
    // 如果是选中的车辆，绘制路线并显示信息窗口
    if (isSelected && v.path && v.path.length > 1) {
      // 创建高亮路线
      const polyline = new AMap.Polyline({
        path: v.path,
        strokeColor: '#FF6600',  // 高亮颜色
        strokeOpacity: 0.9,      // 更高的透明度
        strokeWeight: 8,         // 更粗的线宽
        strokeStyle: 'solid',    // 实线样式
        lineJoin: 'round',
        lineCap: 'round',
        zIndex: 60,
        showDir: true
      })
      
      polyline.setMap(map.value)
      polylines.value.push(polyline)
      
      // 添加起点标记
      const startMarker = new AMap.Marker({
        position: v.path[0],
        icon: new AMap.Icon({
          size: new AMap.Size(25, 34),
          image: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
          imageSize: new AMap.Size(25, 34)
        }),
        offset: new AMap.Pixel(-12, -34),
        title: '起点: ' + v.startLocation
      })
      
      startMarker.setMap(map.value)
      markers.value.push(startMarker)
      
      // 添加终点标记
      const endMarker = new AMap.Marker({
        position: v.path[v.path.length - 1],
        icon: new AMap.Icon({
          size: new AMap.Size(25, 34),
          image: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
          imageSize: new AMap.Size(25, 34)
        }),
        offset: new AMap.Pixel(-12, -34),
        title: '终点: ' + v.endLocation
      })
      
      endMarker.setMap(map.value)
      markers.value.push(endMarker)
      
      // 创建并显示信息窗口
      const infoWindow = new AMap.InfoWindow({
        content: `
          <div class="info-window">
            <div class="info-header">
              <span class="delivery-status">预计明天送达</span>
              <span class="current-location">当前在上海市</span>
            </div>
            <div class="info-content">
              <p><i class="el-icon-user"></i> 司机: ${v.driver}</p>
              <p><i class="el-icon-location"></i> 当前位置: ${v.currentLocation}</p>
              <p><i class="el-icon-time"></i> 预计送达: ${v.estimatedArrivalTime}</p>
            </div>
          </div>
        `,
        offset: new AMap.Pixel(0, -40),
        position: v.position
      })
      
      infoWindow.open(map.value)
      infoWindows.value.push(infoWindow)
      
      // 调整地图视野以聚焦到选中的车辆路线
      map.value.setFitView([...markers.value, ...polylines.value], false, [50, 50, 50, 50])
    }
    
    // 点击标记时选择车辆
    marker.on('click', () => {
      selectVehicle(v)
    })
  })
}

// 选择车辆
const selectVehicle = (vehicle) => {
  selectedVehicle.value = vehicle
  
  // 在地图上高亮显示选中的车辆
  if (mapLoaded.value) {
    highlightVehicle(vehicle)
  }
}

// 刷新跟踪数据
const refreshTracking = () => {
  // 模拟刷新数据
  ElMessage.success('数据已刷新')
  
  // 更新地图显示
  if (mapLoaded.value) {
    if (selectedVehicle.value) {
      highlightVehicle(selectedVehicle.value)
    } else {
      showAllVehicles()
    }
  }
}

// 地图缩放控制
const zoomIn = () => {
  if (map.value) {
    map.value.zoomIn()
  } else {
    ElMessage.info('已放大地图')
  }
}

const zoomOut = () => {
  if (map.value) {
    map.value.zoomOut()
  } else {
    ElMessage.info('已缩小地图')
  }
}

const resetMap = () => {
  if (map.value) {
    if (selectedVehicle.value) {
      highlightVehicle(selectedVehicle.value)
    } else {
      showAllVehicles()
    }
  } else {
    ElMessage.info('已重置地图')
  }
}

// 切换自动刷新
const toggleAutoRefresh = () => {
  isAutoRefresh.value = !isAutoRefresh.value
  if (isAutoRefresh.value) {
    startAutoRefresh()
    ElMessage.success('已开启自动刷新')
  } else {
    stopAutoRefresh()
    ElMessage.warning('已关闭自动刷新')
  }
}

// 开始自动刷新
const startAutoRefresh = () => {
  stopAutoRefresh() // 先清除可能存在的定时器
  refreshTimer = setInterval(refreshTracking, 30000) // 每30秒刷新一次
}

// 停止自动刷新
const stopAutoRefresh = () => {
  if (refreshTimer) {
    clearInterval(refreshTimer)
    refreshTimer = null
  }
}

// 显示轨迹回放
const showTrackHistory = () => {
  if (!selectedVehicle.value) return
  trackHistoryVisible.value = true
}

// 联系司机
const contactDriver = () => {
  if (!selectedVehicle.value) return
  ElMessage.info(`正在拨打司机 ${selectedVehicle.value.driver} 的电话：${selectedVehicle.value.phone}`)
}

// 生命周期钩子
onMounted(async () => {
  refreshTracking()
  if (isAutoRefresh.value) {
    startAutoRefresh()
  }
  
  // 初始化地图
  await nextTick()
  initMap()
})

onUnmounted(() => {
  stopAutoRefresh()
  
  // 销毁地图
  if (map.value) {
    map.value.destroy()
    map.value = null
  }
})
</script>

<style scoped>
.tracking-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-title {
  display: flex;
  flex-direction: column;
}

.header-title h2 {
  margin: 0;
  font-size: 22px;
  color: #303133;
}

.subtitle {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

.tracking-content {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vehicle-list-card {
  height: calc(100vh - 140px);
}

.vehicle-item {
  padding: 12px;
  border-bottom: 1px solid #EBEEF5;
  cursor: pointer;
  transition: background-color 0.3s;
}

.vehicle-item:hover {
  background-color: #F5F7FA;
}

.vehicle-item.active {
  background-color: #ECF5FF;
}

.vehicle-primary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.plate-number {
  font-size: 16px;
  font-weight: 500;
}

.vehicle-secondary {
  display: flex;
  justify-content: space-between;
  color: #606266;
  font-size: 14px;
  margin-bottom: 8px;
}

.vehicle-route {
  color: #909399;
  font-size: 13px;
}

.location {
  display: flex;
  align-items: center;
  gap: 4px;
}

.map-card {
  margin-bottom: 20px;
}

.map-controls {
  display: flex;
  gap: 12px;
}

.map-container {
  position: relative;
  width: 100%;
  height: 500px;
  background-color: #f5f5f5;
}

.map-instance {
  width: 100%;
  height: 100%;
}

.map-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 10;
}

:deep(.info-window) {
  padding: 8px;
  min-width: 200px;
}

:deep(.info-header) {
  background-color: #ff6600;
  color: white;
  padding: 8px;
  border-radius: 4px 4px 0 0;
  margin: -8px -8px 8px -8px;
}

:deep(.delivery-status) {
  font-weight: bold;
  font-size: 16px;
  display: block;
}

:deep(.current-location) {
  font-size: 12px;
}

:deep(.info-title) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

:deep(.plate-number) {
  font-weight: bold;
}

:deep(.status) {
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 12px;
}

:deep(.status.running) {
  background-color: #67c23a;
  color: white;
}

:deep(.status.resting) {
  background-color: #e6a23c;
  color: white;
}

:deep(.status.exception) {
  background-color: #f56c6c;
  color: white;
}

:deep(.info-content p) {
  margin: 5px 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.detail-card {
  margin-bottom: 20px;
}

.transport-info {
  margin-top: 20px;
}

.transport-info h4 {
  margin: 0 0 15px 0;
  color: #303133;
}

.route-info {
  margin-top: 20px;
}

.route-point {
  margin-bottom: 10px;
}

.point-label {
  color: #909399;
  margin-right: 8px;
}

.recent-activities {
  margin-top: 20px;
}

.recent-activities h4 {
  margin: 0 0 15px 0;
  color: #303133;
}

:deep(.el-timeline-item__content) {
  color: #606266;
}

:deep(.el-timeline-item__timestamp) {
  color: #909399;
}
</style>